<template>
  <div style="padding: 0 0px" class="table_wrap">
    <div class="tree">
      <el-card class="box-card cardTree">
        <div class="gun">
          <div class="gunzi"></div>
          拓扑树
        </div>
        <el-tree
          :data="treeData"
          @node-click="getCheckedNodes"
          render-after-expand="true"
          accordion="true"
        ></el-tree>
      </el-card>
    </div>
    <div>
      <div>
        <el-card class="box-card-left">
          <div>
            <span style="border-left: 4px solid #009999"></span>
            <div class="card_left_tittle">台区台账</div>
            <div class="Content">
              <div class="textContent">
                <div class="text" style="font-size:18px;">
                  名称：{{ this.taiDistrict.name }}
                </div>
                <div class="text" style="font-size:18px;">编码：</div>
                <div>{{ this.taiDistrict.psrId }}</div>
                <div class="text" style="font-size:18px;">
                  所在位置：{{ this.taiDistrict.respectiveRegional }}
                </div>
              </div>
            </div>
          </div>
          <div class="realtimeData">
            <span style="border-left: 4px solid #009999"></span>
            <div class="card_left_tittle">实时数据</div>
          </div>
          <div class="content_center">
            <div class="smallBox">
              <img
                src="../../../../../assets/imgCar/loadImg.png"
                alt=""
                class="loadImg"
              />
              <div class="textbox">A相电流</div>
              <div class="textbox boxx1">{{ this.shishiData.ia }}A</div>
            </div>
            <div class="smallBox">
              <img
                src="../../../../../assets/imgCar/loadImg.png"
                alt=""
                class="loadImg"
              />
              <div class="textbox">B相电流</div>
              <div class="textbox boxx1">{{ this.shishiData.ib }}A</div>
            </div>
            <div class="smallBox">
              <img
                src="../../../../../assets/imgCar/loadImg.png"
                alt=""
                class="loadImg"
              />
              <div class="textbox">C相电流</div>
              <div class="textbox boxx1">{{ this.shishiData.ic }}A</div>
            </div>
          </div>
          <div class="content_bottom">
            <div class="smallBox">
              <img
                src="../../../../../assets/imgCar/loadImg.png"
                alt=""
                class="loadImg"
              />
              <div class="textbox">A相电压</div>
              <div class="textbox boxx1">{{ this.shishiData.ua }}kW</div>
            </div>
            <div class="smallBox">
              <img
                src="../../../../../assets/imgCar/loadImg.png"
                alt=""
                class="loadImg"
              />
              <div class="textbox">B相电压</div>
              <div class="textbox boxx1">{{ this.shishiData.ub }}kW</div>
            </div>
            <div class="smallBox">
              <img
                src="../../../../../assets/imgCar/loadImg.png"
                alt=""
                class="loadImg"
              />
              <div class="textbox">C相电压</div>
              <div class="textbox boxx1">{{ this.shishiData.uc }}kW</div>
            </div>
          </div>
          <div class="content_bottom1">
            <div class="smallBox1">
              <img
                src="../../../../../assets/imgCar/loadImg.png"
                alt=""
                class="loadImg1"
              />
              <div class="textbox1">瞬时有功功率</div>
              <div class="textbox boxx1">{{ this.shishiData.p }}kW</div>
            </div>
            <div class="smallBox1">
              <img
                src="../../../../../assets/imgCar/loadImg.png"
                alt=""
                class="loadImg1"
              />
              <div class="textbox1">瞬时无功功率</div>
              <div class="textbox boxx1">{{ this.shishiData.q }}kW</div>
            </div>
          </div>
          <div class="content_bottom1">
            <div class="smallBox1">
              <img
                src="../../../../../assets/imgCar/loadImg.png"
                alt=""
                class="loadImg1"
              />
              <div class="textbox1">总功率因数</div>
              <div class="textbox boxx1">{{ this.shishiData.pft }}kW</div>
            </div>
            <div class="smallBox1">
              <img
                src="../../../../../assets/imgCar/loadImg.png"
                alt=""
                class="loadImg1"
              />
              <div class="textbox1">负载率</div>
              <div class="textbox boxx1">{{ this.shishiData.loadRate }}%</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div>
      <el-card class="box-card_right_bottom">
        <div slot="header" class="clearfix">
          <div class="circle"></div>
          <span>台区负荷曲线</span>
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期"
            class="curveDate"
          >
          </el-date-picker>
        </div>
        <div class="brokenLine">
          <div id="brokenLine"></div>
        </div>
      </el-card>
      <el-card class="box-card_right_bottom1">
        <div slot="header" class="clearfix">
          <div class="circle"></div>
          <span>影响因素曲线</span>
        </div>
        <div class="brokenLine1">
          <div id="brokenLine1"></div>
        </div>
        <div class="brokenLine2">
          <div id="brokenLine2"></div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { cx, getOrgDeptTree } from "@/api/power/institution";
import pagetable from "@/components/pagetable";
import { find, isNil, merge, omitBy, isNull } from "lodash";
import addGardenMap from "@/components/map/addGardenMap";
import { produceList } from "@/api/menu";
import singleimageupload from "@/components/upload/singleimageupload";
import { mapState } from "vuex";
import * as echarts from "echarts";
import {
  getTree,
  taiAreaInformation,
  realtimeData
} from "@/api/carNetworkInteraction/index.js";
export default {
  data() {
    return {
      treeData: [],
      value1: "",
      orgTypes: [], //组织类型，字典类型101
      removeButDisabled: true,
      submitButtonDisabled: false,
      submitButtonDisabled2: false,
      ids: "",
      up_info: "",
      proSign: false,
      regionId: [],
      sscont: {}, //获取搜索值
      jgtab: [],
      isShrink: false,
      detailShow: false,
      table: [],
      proList: [],
      xqform: {}, //详情
      tableData2: [],
      pageSize: 20,
      currentPage: 1,
      total: 0,
      butEnabled: true,
      orgTreeData: [],
      treeData2: {},
      taiDistrict: "", //台区信息
      shishiData: {} //实时数据
    };
  },
  components: { pagetable, addGardenMap, singleimageupload },
  created() {
    this.orgTreeData = this.insData;
    produceList().then(res => {
      this.proList = res.data;
    });
    getOrgDeptTree().then(res => {
      this.jgtab = res.data;
      this.total = res.data.length;
    });
  },
  computed: {
    ...mapState(["regTree", "insData"])
  },
  mounted() {
    this.getTree();
    this.init2();
    this.init1();
    this.init();
  },
  watch: {
    SelectionArray(value) {
      if (value.length == 0) {
        this.butEnabled = true;
      } else {
        this.butEnabled = false;
      }
    }
  },
  methods: {
    //展示树
    getTree() {
      getTree({ type: 1 }).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.treeData = res.result;
        }
      });
    },
    //树点击事件
    getCheckedNodes(val) {
      this.treeData2 = val;
      if (this.treeData2.level == 3) {
        taiAreaInformation({ id: this.treeData2.id }).then(res => {
          if (res.code == 200) {
            this.taiDistrict = res.result;
            this.taiDistrictRealtimeData();
          }
        });
      }
    },
    //实时数据
    taiDistrictRealtimeData() {
      if (this.treeData2.level == 3) {
        realtimeData({ id: this.treeData2.id }).then(res => {
          if (res.code == 200) {
            console.log(res);
            this.shishiData = res.result;
          }
        });
      }
    },
    //台区负荷曲线
    init1() {
      var chartDom = document.getElementById("brokenLine");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["A相", "B相", "C相", "总和"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          data: [
            "00:00",
            "02:00",
            "04:00",
            "06:00",
            "08:00",
            "10:00",
            "12:00",
            "14:00",
            "16:00",
            "18:00",
            "20:00",
            "22:00",
            "24:00"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "A相",
            data: [
              500,
              900,
              350,
              550,
              450,
              550,
              600,
              500,
              400,
              600,
              1000,
              1200,
              900
            ],
            type: "line",
            smooth: true
          },
          {
            name: "B相",
            data: [
              100,
              300,
              550,
              620,
              250,
              700,
              400,
              250,
              650,
              750,
              1200,
              800,
              600
            ],
            type: "line",
            smooth: true
          },
          {
            name: "C相",
            data: [
              450,
              200,
              600,
              100,
              750,
              1000,
              650,
              520,
              410,
              380,
              600,
              1200,
              480
            ],
            type: "line",
            smooth: true
          },
          {
            name: "总和",
            data: [
              1050,
              1400,
              1500,
              1270,
              1500,
              2250,
              1650,
              1270,
              1460,
              1730,
              2800,
              3200,
              1980
            ],
            type: "line",
            smooth: true
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    // 影响因素曲线-气温
    init() {
      var chartDom1 = document.getElementById("brokenLine1");
      var myChart1 = echarts.init(chartDom1);
      var option;

      option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["气温"]
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          data: [
            "00:00",
            "02:00",
            "04:00",
            "06:00",
            "08:00",
            "10:00",
            "12:00",
            "14:00",
            "16:00",
            "18:00",
            "20:00",
            "22:00",
            "24:00"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "气温",
            data: [0, 3, 8, 1, 6, 10, 15, 23, 29, 12, 6, 0, 6],
            type: "line",
            smooth: true
          }
        ]
      };
      myChart1.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    // 影响因素曲线-气象
    init2() {
      var chartDom2 = document.getElementById("brokenLine2");
      var myChart2 = echarts.init(chartDom2);
      var option;
      option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["气象"]
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "2%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          data: [
            "00:00",
            "02:00",
            "04:00",
            "06:00",
            "08:00",
            "10:00",
            "12:00",
            "14:00",
            "16:00",
            "18:00",
            "20:00",
            "22:00",
            "24:00"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "气象",
            data: [
              450,
              200,
              600,
              100,
              750,
              1000,
              650,
              520,
              410,
              380,
              600,
              1200,
              480
            ],
            type: "line",
            smooth: true
          }
        ]
      };
      myChart2.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    fnType(data) {},
    addIns() {},
    addPro() {},
    test() {},
    handleClick() {},
    shrink() {},
    // 详情
    detailrev(index, row) {},
    cx(params) {
      var data = {};
      data.current = this.currentPage;
      data.size = this.pageSize;
      if (!isNil(params)) {
        merge(data, params);
      } else {
        data.parentId = this.ids;
      }
      data = omitBy(data, item => item === "" || isNull(item));
      cx(data).then(res => {
        this.jgtab = res.data.records;
        this.pageSize = res.data.size;
        this.currentPage = res.data.current;
        this.total = res.data.total;
      });
    },
    serviceTypeFormat(row, column, cellValue, index) {
      var dict = find(this.serviceTypes, { value: String(cellValue) });
      return isNil(dict) ? "" : dict.name;
    }
  }
};
</script>
<style lang="scss" scoped>
.curveDate {
  margin-left: 465px;
  width: 200px;
}

.gun {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
  color: #333333;

  .gunzi {
    margin-right: 10px;
    width: 6px;
    height: 19px;
    background: #009999;
  }
}

.cardTree {
  height: 1170px;
  margin: 0;
}

.tree {
  height: 1170px;
  width: 300px;
  margin-left: 20px;
}

#brokenLine2 {
  margin-top: 75px;
  height: 30vh;
  width: 100%;
}

#brokenLine1 {
  height: 30vh;
  width: 100%;
}

#brokenLine {
  height: 30vh;
  width: 100%;
}

.el-card__body {
  height: 770px;
}

.main {
  width: 100%;
  height: 20vh;
}

.clearfix {
  display: flex;
  align-items: center;

  .circle {
    margin: 0 15px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: #009999;
  }
}

#soh {
  width: 100%;
  height: 25vh;
}

.realtimeData {
  padding-top: 23px;
}

.content_bottom {
  justify-content: space-around;
  display: flex;
}

.content_bottom1 {
  justify-content: space-around;
  display: flex;
  padding: 15px 0 0 0;
}

.textbox {
  margin: 0 auto;
  width: 61px;
  height: 21px;
  // margin-left: 29px;
  // margin-top: 20px;
  font-size: 16px;
  font-family: OPPOSans-Regular, OPPOSans;
  font-weight: 400;
  color: #243054;
  line-height: 60px;
}

.textbox1 {
  margin: 0 auto;
  width: 100px;
  height: 21px;
  text-align: center;
  // margin-left: 29px;
  // margin-top: 20px;
  font-size: 16px;
  font-family: OPPOSans-Regular, OPPOSans;
  font-weight: 400;
  color: #243054;
  line-height: 60px;
}

.boxx1 {
  text-align: center;
  margin-top: 5px;
}

.loadImg {
  padding: 16px 0 0 34px;
}

.loadImg1 {
  padding: 16px 0 0 43px;
}

.smallBox {
  height: 153.5px;
  // padding-right: 30px;
  width: 110px;
  background-color: #f7f8fa;
  border-radius: 10px 10px 10px 10px;
}

.smallBox1 {
  height: 153.5px;
  // padding-right: 30px;
  width: 130px;
  background-color: #f7f8fa;
  border-radius: 10px 10px 10px 10px;
}

.content_center {
  padding: 15px 0 15px 0;
  display: flex;
  justify-content: space-around;
}

.text {
  width: 329px;
  line-height: 30px;
  font-size: 16px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
}

.textContent {
  padding: 13px 0 14px 13px;
  height: 171px;
  width: 342px;
}

.Content {
  padding-right: 14px;
  height: 152px;
  width: 355px;
  background-color: #f7f8fa;
  border-radius: 5px 5px 5px 5px;
}

.card_left_tittle {
  display: inline-block;
  margin-left: 8px;
  font-size: 20px;
  font-family: OPPOSans-Light, OPPOSans;
  font-weight: 300;
  color: #333333;
  font-weight: bold;
  padding-bottom: 18px;
}

.box-card_right_bottom {
  margin: 0 0 20px 0;
  width: 900px;
  height: 375px;
}

.box-card_right_bottom1 {
  margin: 0 0 20px 0;
  width: 900px;
  height: 775px;
}

.box-card_right_top {
  width: 840px;
  height: 375px;
  margin: 0;
}

.box-card-left {
  height: 1170px;
  width: 400px;
  position: relative;
  margin: 0 20px 20px 20px;
}

.box-card {
  position: relative;
  // margin: 20px;
}

.table_wrap {
  display: flex;
  margin-top: 20px;

  .table-action-button {
    padding: 4px 8px 3px 8px;
    margin: 5px 1px;
  }

  .red {
    color: #ff4949;
  }

  .el-dialog__footer .el-button {
    margin-right: 40px;
  }

  .el-tabs__item {
    background: #f7f7f7;
  }

  .upde_ .el-form-item {
    width: 90%;
  }

  /*.power_content_per .is-active{
  	background: #006172 !important;
  	color: white !important;
  }*/
}
</style>
